import React from 'react'
import {Outlet,useLocatioin,useNavigate}from 'react-router-dom'
export default function Home() {
  
    /*
    使用NavLink或者Link进行跳转，被称作为声明式路由导航
    使用navigte方法进行路由跳转，被称作为红编程式路由导航

    navigate方法：
    参数1：是to的地址
    参数2：配置对象，可以写一个state属性，就是state传参
    */   
  
  const navigate =useNavigate();
  const toMusicHandle=()=>{
    navigate('/main/home/music/?user=燕燕',{
        state:[
          {id:"001", name:"人间烟火"},
          {id:"002", name:"江湖之间"},
          {id:"003", name:"会不会太晚"},
          {id:"004", name:"晚点告白"},
          {id:"005", name:"偏向"},
        ]
    })
  }
  const toNewsHandle =()=>{
    navigate("/main/home/news/001?user=燕燕",{
        state:[
          {id:"001", name:"空间站国旗与地球同框"},
          { id: "002", name: "罗永浩谈钟薛高卖得贵" },
          { id: "003", name: "麦当劳员工将掉地上面包放回货架" },
        ]
      })
  }
  
    return (
    <div>
        <h3>我是Home的内容</h3>
        <button onClick={toMusicHandle}>Music</button>
        <button onClick={toNewsHandle}>News</button>
        <Outlet/>
    </div>
  )
}
